/**************
* Tree Views *
**************/
+
+$_treeview_borders_color: if($variant=='light',mix($borders_color, $base_color,80%),mix($fg_color, $base_color, 20%));
+$_treeview_backdrop_borders_color: if($variant=='light',mix($backdrop_borders_color, $base_color, 80%),mix($backdrop_fg_color, $base_color, 20%));
treeview.view {
- border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color,
- border-top-color: $bg_color; // while this is the grid lines color, better then nothing
+ border-left-color: $_treeview_borders_color; // this is actually the tree lines color,
+ border-top-color: $_treeview_borders_color; // while this is the grid lines color, better then nothing
> rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
}
&:backdrop, & {
- border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
- border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
+ border-left-color: $_treeview_backdrop_borders_color;
+ border-top-color: $_treeview_backdrop_borders_color; // doesn't work unfortunatelly
}
}
&.separator {
min-height: 2px;
- color: $bg_color;
+ color: $_treeview_borders_color;
- &:backdrop { color: transparentize($bg_color, 0.9); }
+ &:backdrop { color: transparentize($borders_color, 0.8); }
}
&:backdrop {
- border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
- border-top: $backdrop_bg_color;
+ border-left-color: $_treeview_backdrop_borders_color;
+ border-top: $_treeview_backdrop_borders_color;
}
&:drop(active) {
padding: 0 6px;
background-image: none;
border-style: none solid solid none;
- border-color: $bg_color;
+ border-color: $_treeview_borders_color;
border-radius: 0;
text-shadow: none;
&:backdrop {
color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
- border-color: $backdrop_bg_color;
+ border-color: $_treeview_backdrop_borders_color;
border-style: none solid solid none;
background-image: none;
background-color: $backdrop_base_color;